<template>
	<view class="daohang">
		<text>考勤打卡</text>
		<text class="footer iconfont icon-xiangzuo1" @click="back"></text>
	</view>
	<view class="page">
	<view class="title">
		<image :src="IP+touxiang" mode=""></image>
		<view class="">
			<view><text>{{name}}</text></view>
			<view>{{department}}</view>
		</view>
	</view>
	<view class="content">
		<view class="daka">
			<view>
				<text>上班 09：00</text>
				<text>{{shangban}}</text>
			</view><view>
				<text>下班 18：00</text>
				<text>{{xiaban}}</text>
			</view>
		</view>
		<view class="fanwei">
			<map :latitude="latitude" :longitude="longitude" :markers="marker"></map>
			<view class="time" v-show="dakaShow">
				<view>
				<view>{{dakatime}}打卡</view>
				<view>{{time}}</view>
			</view>
			</view>
			
			<button plain='true' v-show="dakaShow" @click="daka"><text>打卡</text></button>
		</view>
	</view></view>
</template>
<script>
	import {ref,computed,reactive,toRefs} from 'vue';
	import {useStore} from 'vuex'
	import http from '../../utils/http.js';
	import store from '../../store/index.js';
	export default {
		setup(){
			const {state,commit,dispatch,getters} = useStore();
			let data=reactive({
				latitude:11.11,
				longitude:11.11,
				marker:[],
				dakaShow:false,
				onDay:'',
				shangban:'未打卡',
				xiaban:'未打卡',
				yidaka:false,
				dakatime:'',
				time:'',
				time_in:'',
				account:'',
				department:'',
				touxiang:'',
				IP:computed(()=>state.IP),
			})
			return {...toRefs(data)}
		},
		methods:{
			back(){
				uni.navigateBack({
					
			});
			},
			getDay(){
				// console.log(111)
				// var _this = this;
				let yy = new Date().getFullYear();
				let m = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				let mm=0
				if(Number(m)<10){
					mm='0'+m
				}
				let hh = new Date().getHours();
				let mf =
				        new Date().getMinutes() < 10
				          ? "0" + new Date().getMinutes()
				          : new Date().getMinutes();
				      let ss =
				        new Date().getSeconds() < 10
				          ? "0" + new Date().getSeconds()
				          : new Date().getSeconds();
				    return  this.onDay = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
			},
			daka(){
				let time=this.getDay();
				this.time_in=String(this.getDay()).split(" ")[0]+' 12:00:00';//如果上午未打卡则将时间设为12：00
				let state=3;//将初始状态设为正常
				let sql='';
				if(this.dakatime=='上班'){
					如果
					if(Number(time.split(" ")[1].slice(0,2))>9){
						//迟到大于十分钟记为迟到
						if(Number(time.split(" ")[1].slice(3,5))>10){
						state=1
						}
					}
					sql=`INSERT INTO clock VALUES('`+this.account+`','`+time+`',NULL,'`+state+`',NULL);`
				}
				else if(this.dakatime=='下班'){
					if(Number(time.split(" ")[1].slice(0,2))<18){
						state=2
					}
					console.log(time)
					if(this.shangban=='未打卡'){
						sql=`INSERT INTO clock VALUES('`+this.account+`','`+this.time_in+`','`+time+`','`+state+`',NULL);`
					}else{
						sql=`UPDATE clock SET clock_go='`+time+`' WHERE word_id='`+this.account+`' AND clock_in='`+this.time_in+`'`
					}
				};
				http({
					url:'/home/edit_dakajilu',
					// method:"post",
					data:{
						sql:sql
					}
				}).then(res=>{
					console.log(res)
					if(res.data.code==200){
						//返回数据打卡成功出现弹框
						this.xiaban=String(time).split(" ")[1].slice(0,5)
						this.dakaShow=false
						uni.showModal({
							content: res.data.msg,
										showCancel: false,
										confirmText:"确定",
										success: function (res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
						});
					}
				}) 
			}
		},
		onShow(){
			this.account=store.state.liujinchang.user.work_id
			this.name=store.state.liujinchang.user.name;
			this.department=store.state.liujinchang.user.department_name;
			this.touxiang='/images/'+store.state.liujinchang.user.figure;
			// console.log(store.state.liujinchang.user.work_id)
			this.time=this.getDay().split(" ")[1].slice(0,5);
			//判断当前时间为上午还是下午
			if(Number(this.getDay().split(" ")[1].slice(0,2))<12){
				this.dakatime="上班"
			}else{
				this.dakatime="下班"
			};
			//添加地图
			uni.getLocation({
				type: 'wgs84',
				isHighAccuracy:true,
				success:res=>{
					this.latitude=res.latitude
					console.log('当前位置的经度：' + res.longitude);
					this.longitude=res.longitude
					console.log('当前位置的纬度：' + res.latitude);
					this.marker=[{
						id:res.latitude,
						latitude:res.latitude,
						longitude:res.longitude
					}];
					//当地理位置在打卡的位置区间时，将打卡的按钮显示
					if(Number(res.longitude)-10>=0||Number(res.longitude)+10<=0&&Number(res.latitude)-10>=0||Number(res.latitude)+10<=0){
					if(!this.yidaka){
						this.dakaShow=true
					}
					}
					else{ 
						this.dakaShow=false
					}
				},
				
			});
			// console.log(this.getDay().split(" ")[0])
			//从数据库中获取当天的打卡信息
			let time=this.getDay().split(" ")[0]//获取年月日
			http({
				url:'/home/get_dakajilu',
				data:{
					word_id:this.account,
					time:time
				}
			}).then(res=>{
				console.log(res.data.data.length)
				let timeData=res.data.data
				//如果返回的数据有长度，那么将打卡时间渲染到页面上
				if(timeData.length>0){
					this.yidaka=true//用于判断添加地图时上方是否会出现打卡按钮
					// console.log(11111,timeData)
					this.shangban=String(timeData[0].clock_in).split(" ")[1].slice(0,5);
					this.time_in=timeData[0].clock_in
					this.xiaban=String(timeData[0].clock_go).split(" ")[1].slice(0,5);
				}
			})
			
		}
	}
</script>

<style lang="less">
	@import url("~@/static/font/iconfont.css");
.page{
	background-color: rgb(242,242,242);
	padding: 24rpx 35rpx;
	box-sizing: border-box;
}
view{
	border-radius: 10rpx;
	box-sizing: border-box;
}

.daohang{
	position: relative;
	padding: 30rpx 0;
	margin-top: 20rpx;
	background: #FFFFFF;
	text:last-child{
		position: absolute;
		top: 40rpx;
		left: 20rpx;
	}
	text:first-child{
	display: block;
	font-size: 38rpx;
	text-align: center;
	font-weight: 100;
	}
}
.title{
	background-color: #FFFFFF;
	padding: 40rpx;
	display: flex;
	align-items: center;
	image{
		width: 150rpx;
		height: 150rpx;
		margin-right: 30rpx;
		border-radius: 75rpx;
	}
	view{
		color: #999;
		margin-top: 15rpx;
		view:first-child{
			margin-top: -15rpx;
		}
	}
	text{
		font-size: 34rpx;
		color: #000000;
	}
}
.content{
	margin-top: 24rpx;
	background-color: #FFFFFF;
	padding: 40rpx;
}
.daka{
	display: flex;
	justify-content: space-between;
	view{
		background-color: rgb(242,242,242);
		width: 290rpx;
		padding: 20rpx;
		text{
			display:block;
			font-size: 32rpx;
		}
		text:last-child{
			margin-top: 20rpx;
			color: #999;
			font-size: 26rpx;
		}
	}
}
.fanwei{
	margin-top: 20rpx;
	height: 650rpx;
	width: 100%;
	// padding:140rpx;
	text-align: center;
	position: relative;
	text{
		color: rgb(153,153,153);
		font-size: 26rpx;
	}
	map{
		height: 550rpx;
		width: 100%;
	}
	.time{
		position: absolute;
		top: 100rpx;
		left: 140rpx;
	}
	button{
		margin-top: 30rpx;
		border: 1px solid blue;
		text{
			font-size: 30rpx;
			color: blue;
		}
	}
}
.time>view{
		background: rgba(56,146,241,0.2);
		width: 320rpx;
		height: 320rpx;
		border-radius: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 60rpx;
		box-shadow: 13rpx 13rpx 8rpx rgb(213,232,253);
		view{
			display: block;
			color: #010010;
			font-size: 34rpx;
		}
		view:first-child{
			font-size: 38rpx;
			color: #000;
		}
	}
</style>
